<template>
  <!-- LOGO和系统名称 -->
  <div class="logo">
    <img class="logoImg" src="../assets/logo.png" alt="">
    <transition name="el-fade-in">
      <div class="SystemTitle" v-show="!Store.isCollapse">招投标文件管理</div>
    </transition>
  </div>


  <!-- 菜单 -->
  <el-menu
      background-color="#001529"
      text-color="rgba(255,255,255,0.65)"
      :default-active="currentActive"
      class="el-menu-vertical-demo"
      :collapse="Store.isCollapse"
      router
      unique-opened
  >

    <el-menu-item index="/index">
      <el-icon>
        <House/>
      </el-icon>
      <span>系统首页</span>
    </el-menu-item>

    <el-menu-item index="/notice" v-show="hasZuserOrTuserOrGfkAdmin()">
      <el-icon>
        <Message/>
      </el-icon>
      <span>系统公告</span>
    </el-menu-item>

    <el-sub-menu index="2" v-show="hasAdmin()">
      <template #title>
        <el-icon>
          <Menu/>
        </el-icon>
        <span>基础管理</span>
      </template>
      <el-menu-item index="/users">
        <el-icon>
          <User/>
        </el-icon>
        <span>用户信息</span>
      </el-menu-item>
      <el-menu-item index="/roles">
        <el-icon>
          <Avatar/>
        </el-icon>
        <span>角色分配</span>
      </el-menu-item>
      <el-menu-item index="/noticeManage">
        <el-icon>
          <Message/>
        </el-icon>
        <span>公告管理</span>
      </el-menu-item>
      <el-menu-item index="/assistantManage">
        <el-icon>
          <Orange/>
        </el-icon>
        <span>助手管理</span>
      </el-menu-item>
    </el-sub-menu>


    <el-sub-menu index="3" v-show="hasGfkAdmin()">
      <template #title>
        <el-icon>
          <setting/>
        </el-icon>
        <span>分类管理</span>
      </template>
      <el-menu-item index="/industryClassificationManage">
        <el-icon>
          <Goblet/>
        </el-icon>
        <span>项目类型</span>
      </el-menu-item>
      <el-menu-item index="/domainClassificationManage">
        <el-icon>
          <Money/>
        </el-icon>
        <span>业务类型</span>
      </el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="4" v-show="hasAdmin()">
      <template #title>
        <el-icon>
          <Notification />
        </el-icon>
        <span>其他管理</span>
      </template>
      <el-menu-item index="/conversation" v-show="hasAdmin()">
        <el-icon>
          <Comment/>
        </el-icon>
        <span>会话管理</span>
      </el-menu-item>
      <el-menu-item index="/files" v-show="hasAdmin()">
        <el-icon>
          <Files/>
        </el-icon>
        <span>文件管理</span>
      </el-menu-item>
      <el-menu-item index="/problemFeedback" v-show="hasAdmin()">
        <el-icon>
          <ChatLineSquare/>
        </el-icon>
        <span>问题反馈</span>
      </el-menu-item>
      <el-menu-item index="/reportSheet" v-show="hasAdmin()">
        <el-icon>
          <Postcard/>
        </el-icon>
        <span>报告单</span>
      </el-menu-item>
    </el-sub-menu>


    <el-menu-item index="/specificationLibrary" v-show="hasGfkAdmin()">
      <el-icon>
        <Eleme/>
      </el-icon>
      <span>规范库管理</span>
    </el-menu-item>


    <el-menu-item index="/shares" v-show="hasAdmin()">
      <el-icon>
        <Promotion/>
      </el-icon>
      <span>分享管理</span>
    </el-menu-item>


    <el-menu-item index="/inviteTendersFileSpecification" v-show="hasZuserOrTuser()">
      <el-icon>
        <Reading/>
      </el-icon>
      <span>招标文件规范</span>
    </el-menu-item>

    <el-menu-item index="/inviteTendersFileAnalysis" v-show="hasTuser()">
      <el-icon>
        <DataAnalysis/>
      </el-icon>
      <span>招标文件分析</span>
    </el-menu-item>

<!--        <el-menu-item index="/fileMatchingAnalysisOfInviteTenders" v-show="hasTuser()">-->
<!--          <el-icon>-->
<!--            <DataLine/>-->
<!--          </el-icon>-->
<!--          <span>投招标文件匹配分析</span>-->
<!--        </el-menu-item>-->


    <el-menu-item index="/automaticBidEvaluation" v-show="hasZuserOrTuser()">
      <el-icon>
        <TakeawayBox/>
      </el-icon>
      <span>招投标文件匹配分析</span>
    </el-menu-item>

    <el-menu-item index="/myFile" v-show="hasZuserOrTuserOrGfkAdmin()">
      <el-icon>
        <Document/>
      </el-icon>
      <span>我的文件</span>
    </el-menu-item>


    <el-menu-item index="/myShare" v-show="hasZuserOrTuserOrGfkAdmin()">
      <el-icon>
        <Paperclip/>
      </el-icon>
      <span>我的分享</span>
    </el-menu-item>

    <el-menu-item index="/trashManage">
      <el-icon>
        <Delete/>
      </el-icon>
      <span>回收站</span>
    </el-menu-item>




    <el-menu-item index="/myReportSheet" v-show="hasZuserOrTuser()">
      <el-icon>
        <Postcard/>
      </el-icon>
      <span>我的报告单</span>
    </el-menu-item>


    <el-menu-item index="/assistant">
      <el-icon>
        <ChatRound/>
      </el-icon>
      <span>系统助手</span>
    </el-menu-item>


<!--        <el-menu-item index="/test">-->
<!--          <el-icon><Monitor /></el-icon>-->
<!--          <span>测试</span>-->
<!--        </el-menu-item>-->

  </el-menu>

  <!-- 遮挡滚动条 -->
  <div :style="{ width: Store.asideWidth + 'px'}"
       style="transition: width 0.5s ease-in-out;position: fixed;left: 0;bottom: 0;height: 3vh;background-color: #001529;z-index: 999999999">

  </div>
</template>

<script setup>
import {
  Avatar,
  ChatLineSquare,
  ChatRound,
  Comment,
  Monitor,
  Tools,
  DataAnalysis,
  Delete,
  Document,
  Eleme,
  Files,
  Goblet,
  House,
  Menu,
  Message,
  Money,
  Orange,
  Paperclip,
  Postcard,
  Promotion,
  Reading,
  Setting,
  TakeawayBox,
  User,
  Notification
} from '@element-plus/icons-vue'
import {useRoute} from 'vue-router';
import {computed} from 'vue';
import {mainStore} from '../stores/main.js' //自定义的pinia状态管理

const Store = mainStore()
const route = useRoute();
const currentActive = computed(() => {
  // 返回匹配当前路由的索引值,用于让对应路径的菜单项高亮
  return route.path;
});

// 方法检查是否包含'Admin'角色   基础管理用
const hasAdmin = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'Admin');
};

// 方法检查是否包含'Admin'或者'GfkAdmin'角色   规范库管理用
const hasAdminOrGfkAdmin = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'Admin' || role === 'GfkAdmin');
};

// 方法检查是否包含'GfkAdmin'角色   规范库管理用
const hasGfkAdmin = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'GfkAdmin');
};

// 方法检查是否包含'Zuser'角色
const hasZuser = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'Zuser');
};

// 方法检查是否包含'Tuser'角色
const hasTuser = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'Tuser');
};

// 方法检查是否包含'Zuser'或者'Tuser'角色
const hasZuserOrTuser = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'Zuser' || role === 'Tuser');
};

// 方法检查是否包含'Zuser','GfkAdmin'或者'Tuser'角色
const hasZuserOrTuserOrGfkAdmin = () => {
  return JSON.parse(localStorage.getItem('userRoles')).some(role => role === 'Zuser' || role === 'Tuser' || role === 'GfkAdmin');
};

</script>

<style>
.el-menu-vertical-demo {
  /* 增加的部分：隐藏右边框线条 */
  border-right: none;
}

/* Element UI的el-menu组件允许嵌套，在需要的时候确保子菜单的最右边的线也被移除 */
.el-menu-vertical-demo .el-menu-item, .el-menu-vertical-demo .el-sub-menu__title {
  border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/*logo*/
.logo {
  height: 60px;
  /*background-color: #545c64;*/
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logoImg {
  width: 30px;
  height: 30px;
}

.SystemTitle {
  margin-left: 5px;
  font-size: 20px;
  white-space: nowrap; /* 确保文本在一行显示，不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.el-sub-menu__title {
  margin: 0 4px 0 0 !important;
}

/*整个二级菜单的背景*/
.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
}

/*二级菜单项边距*/
.el-menu-item {
  margin: 0 4px 0 0 !important;
}

/*鼠标移动到二级菜单项时的效果*/
.el-menu-item:hover {
  color: #fff !important;
}

/*鼠标在二级菜单项的点击效果*/
.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  margin: 0 4px 0 0 !important;
  color: white;
}
</style>
